<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.2.3/echarts.min.js"></script>
    <script type="text/javascript" src="https://static.pocketlive.tv/static/plugins/jquery.min.js"></script>
    <script src="https://static.pocketlive.tv/static/plugins/DatePicker/WdatePicker.js"></script>
</head>
<body>
	
	<form action="" method="get">
	<span class="filter-bar">
	start: <input id="start" name="start" value="<?php echo $start = isset($_GET['start'])?$_GET['start']:date('Y-m-d', time());?>" type="text" onClick="WdatePicker()"/>
	end: <input id="end" name="end" value="<?php echo $end = isset($_GET['end'])?$_GET['end']:date('Y-m-d', time()+24*3600);?>" type="text" onClick="WdatePicker()"/>
    </span>
    <input type="submit">
	</form>
	
	<br/><br/>
    <div id="main" style="width: 1800px;height:600px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        chart();
     	setInterval(function () {
     		chart();
		}, 60000);
		function chart() {
			myChart.showLoading();
			$.get("<?php echo $url;?>?start=<?php echo $start;?>&end=<?php echo $end;?>").done(function (data) {
	        	myChart.hideLoading();
		 		if (data) {
		 			data = $.parseJSON(data);
		            myChart.setOption({
		            	title: {
		            	text: '直播间在线曲线图',
		            },
		            tooltip: {
		                trigger: 'axis'
		            },
		            legend: {
		            	 data:['在线数']
		            },
		            xAxis:  {
		                type: 'category',
		                boundaryGap: false,
		                data: data.time
		            },
		            yAxis: {
		                type: 'value',
		            },
		            series: [
		                {
		                    name:'在线数',
		                    type:'line',
		                    data: data.nums,
		                    markPoint: {
		                        data: [
		                            {type: 'max', name: '最大值', symbolSize:60},
		                            {type: 'min', name: '最小值', symbolSize:60}
		                        ]
		                    },
		                    markLine: {
		                        data: [
		                            {type: 'average', name: '在线数'}
		                        ]
		                    }
		                },
		            ]
			        });
		 		}
		    });
		}
    </script>
</body>
</html>